@import url( https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;900&display=swap );
@import "@wordpress/base-styles/breakpoints";
@import "@wordpress/base-styles/mixins";

.is-p2-invite.invite-accept {
	position: fixed;
	top: 0;
	left: 0;
	bottom: 0;
	width: 100vw;
	background: #fff;
	color: var(--p2-color-text);
	font-family: var(--p2-font-inter);
	letter-spacing: -0.01em;
	overflow-y: scroll;
	overflow-x: hidden;

	.invite-accept__form {
		max-width: unset;
		padding: 2rem 1.5rem 0;
		height: calc(100% - 2rem);

		> div {
			display: flex;
			flex-direction: column;
			height: 100%;
		}
	}

	.invite-accept-header {
		display: flex;
		flex-direction: column;
		align-items: center;
	}

	.invite-accept-header__site-icon {
		width: 56px;
		height: 56px;
		border-radius: 2px;
		margin-bottom: 1.5rem;
		background:
			url()
			no-repeat 0 0;
		background-color: var(--p2-color-text);

		span {
			display: none;
		}

		@include break-mobile {
			margin-bottom: 2rem;
		}
	}

	.invite-accept-header__join-site-title {
		font-size: var(--p2-font-size-form-xl);
		font-weight: 900; /* stylelint-disable-line scales/font-weights */
		margin: 0 0 1rem;
		letter-spacing: -0.02em;
		line-height: 1.35;
		text-align: center;

		@include break-mobile {
			font-size: var(--p2-font-size-form-xxl);
			margin-bottom: 1.5rem;
		}
	}

	.invite-accept-header__join-site-text {
		text-align: center;
		font-size: var(--p2-font-size-form-s);
		line-height: 1.8;
		margin-bottom: 2.5rem;
		max-width: 400px;
	}

	.is-busy button,
	button.is-busy {
		background-image: none;

		&::after {
			content: "";
			display: block;
			width: 24px;
			height: 24px;
			animation: p2-spinner 0.5s linear infinite;
			background:
				url()
				no-repeat 0 0;
		}
	}

	.invite-accept-footer {
		display: flex;
		align-items: center;
		justify-content: center;
		padding: 1.5rem 0;

		.invite-accept-footer__w-logo {
			width: 20px;
			height: 20px;
			margin-right: 8px;
		}

		.invite-accept-footer__footer-text {
			font-size: var(--p2-font-size-form-xxs);
		}
	}

	// invite-accept-logged-in
	.invite-accept-logged-in > div {
		display: flex;
		flex-direction: column;
		height: 100%;
	}

	.invite-accept-logged-in__form-container {
		max-width: 500px;
		margin: 1rem auto 0;
		flex: 1;
		display: flex;
		flex-direction: column;
		align-items: center;

		@include break-mobile {
			margin-top: 2rem;
		}
	}

	.invite-accept-logged-in__join-as {
		margin: 0 0 2.5rem;

		.gravatar {
			width: 48px;
			height: 48px;
			margin-bottom: 1rem;
		}
	}

	.invite-accept-logged-in__join-as-text {
		color: var(--p2-color-text);
		font-size: var(--p2-font-size-form-s);
	}

	.invite-accept-logged-in__join-as-username {
		font-weight: 600;
	}

	.invite-accept-logged-in__buttons {
		display: flex;
		flex-direction: column;
		align-items: center;
		max-width: 400px;
		width: 100%;
		margin: 0 auto;
	}

	// invite-accept-logged-out
	.invite-accept-logged-out__form-container {
		max-width: 500px;
		margin: 1rem auto 0;
		flex: 1;
		display: flex;
		flex-direction: column;
		align-items: center;

		@include break-mobile {
			margin-top: 2rem;
		}
	}

	.invite-accept-logged-out__footer-link {
		display: flex;
		flex-direction: column;
		align-items: center;
		font-size: var(--p2-font-size-form-xxs);
	}

	.signup-form {
		max-width: 400px;
		width: 100%;
		margin: 0 1.5rem 2rem;
	}
}

@keyframes p2-spinner {
	from {
		transform: rotate(0deg);
	}

	to {
		transform: rotate(360deg);
	}
}
